<template>
	<view style="display: flex; flex-direction: column; position: relative;" :style="{height:heightmax+'px'}">
		<view class="" style="flex: 1; width: 100%; position: relative;" :style="{height:maxnum+'px'}">
			<view class="text" :style="{top:num+'px'}">
				文字位置
			</view>
		</view>
		<view class="" style="position: absolute; bottom: 0; height: 10px; width: 100%; border-top: 2px solid gray;">
			<view class="slider-box">
				<slider active-color="#d4237a" min="0" :max="maxnum" :value="num"
					block-size="16" @changing="yinliangChange"></slider>
				<view class="slider-footer">
					<view class="xiao">小
					</view>
					<view class="huifu" @click="huifuYinliang">
						恢复默认
					</view>
					<view class="da">
						大
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 100 ,// 默认为0
				maxnum:'',
				heightmax:''
			}
		},
		onLoad() {
			this.setNumValue(); // 页面加载时设置num值
		},
		methods: {
			yinliangChange(e) {
				this.num = e.detail.value;
				uni.$emit('height',this.num);
			},
			huifuYinliang(){
				this.num = 150; // 恢复默认时重新设置num值
				uni.$emit('height',this.num);			
			},
			setNumValue() {
				let systemInfo = wx.getSystemInfoSync(); // 获取设备信息
				this.heightmax = systemInfo.screenHeight;
				this.maxnum = systemInfo.screenHeight - 55; // 获取屏幕高度
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text{
		font-size: 24px;
		position: absolute; 
		left: 50%; 
		transform: translateX(-50%);
	}
	.slider-box {
		background: #eee;
	
		.slider-footer {
			display: flex;
			justify-content: space-around;
			align-items: center;
	
			.xiao {
				font-size: 28rpx;
			}
	
			.huifu {
				width: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				border: 1rpx solid #ccc9ce;
				text-align: center;
				border-radius: 25rpx;
			}
	
			.da {
				font-size: 28rpx;
			}
		}
	
	}

</style>
